<template>
  <div class="container">
    <div class="div-pop" v-if="isCreateEdit" @click="isCreateEdit=false" catchtouchmove="true">
      <div class="border-radius-5 width-per-80 pop-con" catchtap="true">
        <div class='createEdit pad-t-3'>
          <div class="pad-b-3 cat-con-h">
            <div class="flex v-align-c mar-13">
              <span class="pad-r-11">分类名称</span>
              <input class="border-all border-radius-5 pad-l-10 width-185" v-model="category.categoryName"
                    cursor-spacing="100" placeholder="请输入类目名称"/>
            </div>
          </div>
          <div class="flex border-t font-14">
            <div class="flex-item align-c btn-sure border-r" @click="isCreateEdit=false">取消</div>
            <div class="flex-item align-c btn-sure sure" :style="{backgroundColor: globalStyle.color2, color: globalStyle.styleType === 10 ? globalStyle.color4 : '#fff'}" @click="save">确定</div>
          </div>
        </div>
      </div>
    </div>
    <div class="tig">点击右侧按钮，查看您设置后的效果~ <div class="check" @click="$pt.reLaunch({ url: '/pages/shop/main' })">查看效果</div></div>
    <!-- <div class="tabs">      
      <ul>
        <li v-for="(item, index) in tabs" :class="tabsCur == index ? 'on' : ''" :key="index" @click="tabsClick(index)">{{item.name}}({{item.nums}})</li>
      </ul>
    </div> -->
    <div class="list-item">
      <div class="noData" v-if="listDisCategory.length===0 && tabsCur == 1">暂无类目</div>
      <div class="noData" v-if="listCategory.length===0 && tabsCur == 0">暂无类目</div>
      <ul v-if="tabsCur == 0">
        <li v-for="(item, index) in listCategory" :key="index">
          {{item.categoryName}}
          <div class="item-btn">
            <span @click="deleteCategory(item.categoryId, '1')">删除</span>
            <span @click="editCategory(item, '1')">编辑</span>
          </div>
        </li>
      </ul>
      <ul v-if="tabsCur == 1">
        <li v-for="(item, index) in listDisCategory" :key="index">
          {{item.categoryName}}
          <div class="item-btn">
            <span @click="deleteCategory(item.categoryId, '2')">删除</span>
            <span @click="editCategory(item, '2')">编辑</span>
          </div>
        </li>
      </ul>
      <div v-if="tabsCur == 0" class="height-66"></div>
    </div>
    <div v-if="tabsCur == 0" class="add-btn">
      <span @click="addCategory('1')" :style="{'background-color': globalStyle.color2, color: globalStyle.styleType === 10 ? globalStyle.color4 : '#fff'}">+新增自营分类</span>
    </div>
  </div>
</template>

<script>
  import { saveUserGoodsCategory, deleteUserGoodsCategory, listGoodsCategory } from '@/api/shop'
  import { saveProjectGoodsCategory, deleteProjectGoodsCategory } from '@/api/distribution'

  export default {
    data() {
      return {
        tabsCur: 0,
        tabs: [
          {
            name: '自营分类',
            nums: ''
          }, {
            name: '分销分类',
            nums: ''
          }
        ],
        listCategory: [],
        listDisCategory: [],
        category: {
          categoryId: '',
          categoryName: '',
          distributeRatio: ''
        },
        categoryType: '1',
        isCreateEdit: false,
        barShow: false,
        globalStyle: {}
      }
    },
    onUnload() {
      this.isCreateEdit = false
    },
    onShow() {
      this.tabsCur = 0
      let getAppInfo = this.$pt.getStorageSync('appInfo')
      this.globalStyle = getAppInfo.style
      this.initListCategory()
      if (this.getCurrentPage().query.action === 'add') {
        if (this.getCurrentPage().query.disCategory) {
          this.addCategory('2')
        } else {
          this.addCategory('1')
        }
      }
    },
    methods: {
      tabsClick(e) {
        this.tabsCur = e
      },
      initListCategory() {
        listGoodsCategory(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.listCategory = response.data.userGoodsCategorys
          this.listDisCategory = response.data.projectGoodsCategorys
          this.$set(this.tabs[0], `nums`, response.data.userGoodsCategorysCount)
          this.$set(this.tabs[1], `nums`, response.data.projectGoodsCategorysCount)
        }).catch(() => {
        })
      },
      addCategory(type) {
        this.category = {
          categoryId: '',
          categoryName: '',
          distributeRatio: ''
        }
        this.categoryType = type
        this.isCreateEdit = true
      },
      editCategory(item, type) {
        this.categoryType = type
        if (!item.distributeRatio) item.distributeRatio = ''
        this.category = Object.assign(this.category, item)
        this.isCreateEdit = true
        if (this.getStoreCardFlag === 1 && this.tabsCur === 0) {
          this.barShow = true
        } else {
          this.barShow = false
        }
      },
      save() {
        if (!this.category.categoryName) return this.$utils.showToast({ title: '请填写类目名称' })
        if (this.category.distributeRatio > 100 || this.category.distributeRatio < 0) return this.$utils.showToast({ title: '分销比例不能小于0或者大于100' })
        this.category.memberId = this.getCustomerId
        if (this.categoryType === '1') {
          saveUserGoodsCategory(this.category).then((response) => {
            if (response.isError) return
            this.$utils.showToast({ title: '保存成功' })
            this.isCreateEdit = false
            setTimeout(() => {
              this.initListCategory()
            }, 500)
          }).catch(() => {
          })
        } else {
          saveProjectGoodsCategory(this.category).then((response) => {
            if (response.isError) return
            this.$utils.showToast({ title: '保存成功' })
            this.isCreateEdit = false
            setTimeout(() => {
              this.initListCategory()
            }, 500)
          }).catch(() => {
          })
        }
      },
      deleteCategory(categoryId, categoryType) {
        const that = this
        this.$pt.showModal({
          content: '确定要删除此类目吗？',
          success(res) {
            if (res.confirm) {
              if (categoryType === '1') {
                deleteUserGoodsCategory(categoryId).then((response) => {
                  if (response.isError) return
                  that.$utils.showToast({ title: '删除成功' })
                  setTimeout(() => {
                    that.initListCategory()
                  }, 500)
                }).catch(() => {
                })
              } else {
                deleteProjectGoodsCategory(categoryId).then((response) => {
                  if (response.isError) return
                  that.$utils.showToast({ title: '删除成功' })
                  setTimeout(() => {
                    that.initListCategory()
                  }, 500)
                }).catch(() => {
                })
              }
            } else if (res.cancel) {
              console.log('用户取消')
            }
          }
        })
      },
      validateNum(e) {
        let value = e.mp.detail.value
        value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
        this.category.distributeRatio = value
        const pos = e.mp.detail.cursor
        // 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
        return {
          value: value,
          cursor: pos
        }
      },
      selCategoryType(e) {
        this.categoryType = e.mp.detail
      }
    }
  }
</script>

<style lang="less" scoped>
.tig {
  padding-left: 20px;
  padding-right: 8px;
  height: 30px;
  background: #fdc807;
  color: #333333;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 6px solid #f6f6f6;
  .check {
    width: 85px;
    height: 23px;
    font-size: 12px;
    color: #fff;
    background: #333333;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .uncheck {
    width: 85px;
    height: 23px;
    font-size: 12px;
    color: #fdfdfd;
    background: #cccccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.pop-con {
  margin-top: -70px;
}
.cat-con-h {
  min-height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-sure {
  height: 38px;
  line-height: 38px;
  &.sure {
    // background: linear-gradient(to right, #fedb00, #ffd100);
  }
}
.per-box {
  background: #f2f2f2;
  height: 30px;
  line-height: 30px;
  border: #d9d9d9 1px solid;
  margin-left: -3px;
  padding: 0 6px;
  color: #333333;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.div-list {
  border-bottom: 0.5px solid #d9d9d9;
  margin-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.div-list:last-child {
  border-bottom: none;
}
.border-all {
  border: #d9d9d9 1px solid !important;
}

.createEdit {
  border-radius: 5px;
  background: #fff;
  width: 100%;
  overflow: hidden;
}

.tabs {
  height: 57px;
  background: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
  ul {
    width: 232px;
    height: 33px;
    display: flex;
    overflow: hidden;
    border-radius: 100px;
    border-bottom: solid 1px #ececec;
    li {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      color: #0a0a0a;
      font-size: 14px;
      &.on {
        background: #fed502;
        color: #060a21;
      }
    }
  }
}
.list-item {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 62px;
  top: 36px;
  background-color: #f6f6f6;
  .noData {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ul {
    li {
      height: 52px;
      padding-left: 17px;
      padding-right: 17px;
      border-bottom: 1px solid #e4e4e4;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #1e1e1e;
      background-color: #fff;
      &:last-child {
        border-bottom: none;
      }
      .item-btn {
        display: flex;
        align-items: center;
        span {
          width: 65px;
          height: 24.5px;
          background: #000000;
          border: solid 1px #000;
          box-sizing: border-box;
          border-radius: 5px;
          cursor: pointer;
          color: #dddddd;
          font-size: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 8px;
          &:first-child {
            background: #fff;
            color: #aeaeae;
            margin-left: 0;
            border: solid 1px #c9c9c9;
          }
        }
      }
    }
  }
}
.add-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  span {
    width: 360px;
    height: 40px;
    color: #000;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
  }
}
</style>
